<script setup lang="ts">
// @ts-ignore
import homeActive from "~/assets/images/home-active.png";
// @ts-ignore
import homeBlack from "~/assets/images/home-black.png";
// @ts-ignore
import historyActive from "~/assets/images/history-active.png";
// @ts-ignore
import historyBlack from "~/assets/images/history-black.png";
// @ts-ignore
import myActive from "~/assets/images/my-active.png";
// @ts-ignore
import myBlack from "~/assets/images/my-black.png";

const route = useRoute();
const active = ref(route.path);

const list = [
  { active: homeActive, inactive: homeBlack, text: "Home", path: "/" },
  {
    active: historyActive,
    inactive: historyBlack,
    text: "History",
    path: "/history",
  },
  { active: myActive, inactive: myBlack, text: "My", path: "/user" },
];
</script>

<template>
  <van-tabbar
    v-model="active"
    active-color="#F13484"
    class="tab-bar"
    :border="false"
    inactive-color="#272727"
    placeholder
    safe-area-inset-bottom
  >
    <van-tabbar-item
      v-for="(item, index) in list"
      :key="index"
      replace
      :to="item.path"
      :name="item.path"
    >
      <span>{{ item.text }}</span>
      <template #icon="props">
        <img :src="props.active ? item.active : item.inactive" alt="" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>
